<script lang="ts" setup>
import CheckBoxLayout from "~/layouts/setting-drawer/checkbox-layout.vue";
import type { LayoutTheme } from "~/config/layout-theme";
import { colors } from "~/config/theme.ts";

const appStore = useAppStore();

const onSwitchTheme = (value: string) => {
  appStore.updateTheme(value);
};
const message = useMessage();
const dialog = useDialog();
const notification = useNotification();
const loadingBar = useLoadingBar();

const onMessage = () => {
  message.success("Hello, world!");
};

const onDialog = () => {
  dialog.success({
    title: "Hello, world!",
    content: "This is a success dialog.",
    onPositiveClick: onMessage,
  });
};

const onNotification = () => {
  notification.success({
    title: "Hello, world!",
    content: "This is a success notification.",
  });
};

const onLoading = () => {
  loadingBar.start();
  setTimeout(() => {
    loadingBar.finish();
  }, 3000);
};

const onSwitch = (theme: LayoutTheme["layoutStyle"]) => {
  appStore.updateLayoutStyle(theme);
  if (theme === "dark") document.documentElement.className = "dark";
  else document.documentElement.removeAttribute("class");
};

const appLocale = useAppLocale();
const onSwitchLang = (lang: string) => {
  appLocale.value = lang;
};

const param = reactive({ page: 1, limit: 5 });

// 测试axios
const onRequest01 = async () => {
  await useGet("/sys/user/page", param).then((res) => {
    console.log("数据====》", res.data.list);
  });
};
</script>
<template>
  <div class="m-5">
    <div class="text-2xl text-red font-bold">项目首页</div>
    <div class="mt-5">
      <n-space>
        <n-button type="primary" @click="onMessage">Message</n-button>
        <n-button type="info" @click="onDialog">Dialog</n-button>
        <n-button type="warning" @click="onNotification">Notification</n-button>
        <n-button type="error" @click="onLoading">Loading</n-button>
      </n-space>
    </div>
    <hr class="mt-5" />
    <div class="flex gap-5 mt-5">
      <CheckBoxLayout checked />
      <CheckBoxLayout layout="mix" />
      <CheckBoxLayout layout="top" />
      <CheckBoxLayout inverted layout="side" />
    </div>
    <hr class="mt-5" />
    <div class="mt-5">
      <n-space>
        <n-button @click="onSwitch('light')"> 浅色</n-button>
        <n-button @click="onSwitch('dark')"> 深色</n-button>
      </n-space>
    </div>
    <hr class="mt-5" />
    <div class="mt-5">
      <n-space>
        <n-button
          v-for="(color, key) in colors"
          :key="key"
          type="primary"
          @click="onSwitchTheme(key)"
        >
          {{ key }}
        </n-button>
      </n-space>
    </div>

    <hr class="mt-5" />
    <div class="mt-5">
      <n-space>
        <n-input />
        <n-button @click="onSwitchLang('en-US')"> English</n-button>
        <n-button @click="onSwitchLang('zh-CN')"> 中文</n-button>
      </n-space>
    </div>

    <hr class="mt-5" />
    <h1 class="mt-5">接口测试</h1>
    <div class="mt-5">
      <n-space>
        <n-button type="success" @click="onRequest01">查询</n-button>
      </n-space>
    </div>
  </div>
</template>
<style scoped></style>
